<template>
    <a href="/api/getFile" download="a">下载docx文件</a>
</template>

<script setup>
    import axios from 'axios'
    import { saveAs } from 'file-saver'
    /* 
        接收后端文件下载的办法 
        1. 通过 window.open直接打开接口，简单方便，缺点是无法添加修改文件名称，且无法识别身份
        2. 直接使用 a 标签 和 href 和 download 属性 进行下载， 缺点无法识别身份，并且跨域状态下download无效
        3. 通过请求接口动态添加a标签的方式：缺点是代码多
            - 由于IE兼容问题，首先判断浏览器是否存在window.navigator.msSaveBlob 方法，存在，则直接使用 msSaveBlob 下载
            - 反之
                - 使用window.URL.createObjectURL创建本地url
                - 创建 a 标签
                - 为 a 标签的 href属性赋值
                - 为 a 标签的 download 属性增加文件名称
                - 模拟 a 标签的点击事件
                - 最后使用 window.URL.revokeObjectURL 来销毁本地url
            - 至此下载完成
        4. 利用插件 file-saver 的方法 saveAs 将文件直接下载：saveAs(数据，文件名)
    */
    axios.get('/api/getFile', {responseType: "blob"}).then(res => {
        // 通过请求接口动态添加a标签的方式
        if(window.navigator.msSaveBlob) {
            // 1. 兼容IE
            window.navigator.msSaveBlob(res.data, {
                type: 'application/vnd.openxmlformats-officedocument.wordprocessingml.document'
            }, 'test.docx')
        } else {
            // 2. 创建本地 URL
            let url = window.URL.createObjectURL(res.data)
            // 3. 创建 a 标签
            let link = document.createElement('a')
            // 4. 给 a 标签的 href 属性赋值
            link.href = url
            // 5. 给 a 标签的 download属性修改文件名称
            link.download = 'down.docx'
            // 6. 模拟 a 标签的点击事件
            link.click()
            // 7. 销毁本地 url
            window.URL.revokeObjectURL(url)
        }


        // 利用插件 file-saver 的方法 saveAs 将文件直接下载：saveAs(数据，文件名)
        // saveAs(res.data, 'a')
    })
</script>
 
<style lang='less' scoped>
    
</style>